<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
<bsl:layout-component name="html-head">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/viewArticle.css" type="text/css" media="all" />
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>
	
	<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
	<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
	<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
	<!-- The File Upload file processing plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
	<script src="<%=request.getContextPath()%>/js/locale.js"></script>
	<script src="<%=request.getContextPath()%>/js/upload.main.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
	
	<script type="text/javascript">
    
	$(function(){
        var options1 = {navigation: 'hover',direction:  'left'};
        $('.ppy3').popeye(options1);
    });
    
</script>
	
</bsl:layout-component>
<bsl:layout-component name="title">
${division.divName}-${category.cateName}
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>

<div class="article_core">
<c:forEach items="${articles}" var="article" varStatus="vs">
<c:choose>
	<c:when test="${article.articleProperty.id == 2}">
		<c:if test="${focus eq null}">
			<c:set var="focus" value="focus"></c:set>
			<div class="basic_title"><div class="focus_cat">${article.articleProperty.propertyName}</div></div>
		</c:if>
	</c:when>
	<c:otherwise>
		<c:if test="${ (thisCate eq null) or (thisCate != article.category.id)}">
			<c:set var="thisCate" value="${article.category.id}"></c:set>
			<div class="basic_title"><a href="${contextPath}/viewArticle?category.id=${article.category.id}">${article.category.cateName}&nbsp;»</a></div>
		</c:if>
	</c:otherwise>
</c:choose>
<div class="entry_article" style="width:98%;">
	<c:choose>
		<c:when test="${not empty article.album.photos}">
			<c:set value="width: 75%" var="textWidth"></c:set>
		</c:when>
		<c:otherwise>
			<c:set value="width: 100%" var="textWidth"></c:set>
		</c:otherwise>
	</c:choose>
<div class="entry_left" style="${textWidth}">
	<div class="article_header" >
			<div class="pre-cat">
			<div class="pre-cat-inner"> 
					
							<a title='浏览"${article.category.cateName}"下的文章' href="${contextPath}/viewArticle?category.id=${article.category.id}">${article.category.cateName}</a>
						
				</div>
				<div class="pre-cat-arrow"></div>
			</div>
	
			<h2 class="article_title">
				<a target="_blank" href="${contextPath}/viewArticleDetails?article.id=${article.id}" rel="external" title="${article.title}">${article.title}</a>
			</h2>
			<div class="article_meta">
				<div class="user_rate" style="float:left;">
						    <div class="big_rate_bak">
						        <b rate="2">&nbsp;</b>
						        <b rate="4">&nbsp;</b>
						        <b rate="6">&nbsp;</b>
						        <b rate="8">&nbsp;</b>
						        <b rate="10">&nbsp;</b>
						        <div id="big_rate_up_a${article.id}" class="big_rate_up" style="width: 123.20000000000002px; display: block; height: 26px; " ></div>
						    </div>
						    <p><span id="s" class="s">${article.rateObject.integerPart}</span><span id="g" class="g">.${article.rateObject.decimalPart}</span></p>
				</div>
						<script type="text/javascript">
							showRate('a${article.id}', '${article.rateObject.integerPart}', '${article.rateObject.decimalPart}');
						</script>
				<div class="comment_num">
					(<a href="${contextPath}/viewCommentList?article.id=${article.id}" title="">&nbsp;${article.commentNum}&nbsp;人评论</a>)
				</div>		
			</div>
		</div>
		<div class="clear"></div>
		<div class="article_brief_text" >
			
			${article.articleContent.brief} <a target="_blank" href="${contextPath}/viewArticleDetails?article.id=${article.id}">详细»</a>
			
		</div>
		<div class="clear"></div>
		
</div>
	<c:if test="${not empty article.album.photos}">
	<div class="entry_right">
		
			  <div class="ppy3" style="margin-left: 10px">
				<ul class="ppy-imglist">
					<c:forEach items="${article.album.photos}" var="photo">
						<li>
			                  <a href="${contextPath}${photo.thumbnailLarge}">
			                      <img src="${contextPath}${photo.thumbnailSmall}" alt="">
			                  </a>
			                  <c:if test="${not empty photo.description}">
			                  	<span class="ppy-extcaption">
			                      <strong>${photo.description}</strong>
			                  	</span>
			                  </c:if>
			                  
			              </li>
					</c:forEach>
			              
			      </ul>
			        <div class="ppy-outer">
			                <div style="background-image: url(&quot;${contextPath}${article.album.coverPhoto.thumbnailSmall}&quot;);" class="ppy-stage">
			                    <div class="ppy-counter">
			                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
			                    </div>
			               	</div>
			                <div class="ppy-nav">
			                        <a class="ppy-next" title="下一张">下一张</a>
			                        <a class="ppy-prev" title="上一张">上一张</a>
			                </div>
			       </div>
			       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
			                <span class="ppy-text">
			                        
			                </span>
			       </div>
				</div>
		</div>
	</c:if>
	<div class="article_tails">
	
						<jsp:include page="../common/timeFormat.jsp">
							<jsp:param value="${article.createTime.time}" name="time"/>
							<jsp:param value="${article.createTime.year }" name="year"/>
							<jsp:param value="${article.createTime.month }" name="month"/>
							<jsp:param value="${article.createTime.day}" name="day"/>
							<jsp:param value="${article.createTime.hours}" name="hours"/>
							<jsp:param value="${article.createTime.minutes}" name="minutes"/>
							<jsp:param value="${article.createTime.date}" name="date"/>
						</jsp:include>
			&nbsp;|&nbsp;<a target="_blank" href="${contextPath }/viewCustomerInfo?customer.id=${article.createByUser.id}">${article.createByUser.userName}</a>
			&nbsp;|&nbsp;<a href="${contextPath}/viewDiscussList?article.id=${article.id}" >进入贴吧</a>
	</div>
</div>
</c:forEach>
	
</div>
<c:if test="${category != null && category.id != 0}">
	<c:choose>
		<c:when test="${page.currentPage<=4 && page.totalPage >5}">
			<c:set var="startPage"  value="1"></c:set>
			<c:set var="endPage"  value="5"></c:set>
			<c:set var="firstStyle"  value="display: none;"></c:set>
			<c:set var="lastStyle"  value=""></c:set>
		</c:when>
		<c:when test="${page.currentPage<=4 && page.totalPage <=5}">
			<c:set var="startPage"  value="1"></c:set>
			<c:set var="endPage"  value="${page.totalPage}"></c:set>
			<c:set var="firstStyle"  value="display: none;"></c:set>
			<c:set var="lastStyle"  value="display: none;"></c:set>
		</c:when>
		
		<c:when test="${page.currentPage>4 && page.currentPage <= page.totalPage- 4}">
			<c:set var="startPage"  value="${page.currentPage-2}"></c:set>
			<c:set var="endPage"  value="${page.currentPage+2}"></c:set>
			<c:set var="firstStyle"  value=""></c:set>
			<c:set var="lastStyle"  value=""></c:set>
		</c:when>
		
		<c:when test="${page.currentPage>4 && page.currentPage > page.totalPage- 4}">
			<c:set var="startPage"  value="${page.totalPage-4}"></c:set>
			<c:set var="endPage"  value="${page.totalPage}"></c:set>
			<c:set var="firstStyle"  value=""></c:set>
			<c:set var="lastStyle"  value="display: none;"></c:set>
		</c:when>
	</c:choose>
	<c:choose>
		<c:when test="${page.currentPage == 1}">
			<c:set var="prevStyle" value="display: none;"></c:set>
		</c:when>
		<c:otherwise>
			<c:set var="prevStyle" value=""></c:set>
		</c:otherwise>
	</c:choose>

	<c:choose>
		<c:when test="${page.totalPage == 0 || page.currentPage == page.totalPage}">
			<c:set var="nextStyle" value="display: none;"></c:set>
		</c:when>
		<c:otherwise>
			<c:set var="nextStyle" value=""></c:set>
		</c:otherwise>
	</c:choose>

	<div class="msdn">
		<a href="viewArticle?category.id=${category.id}&page.currentPage=${page.currentPage-1}" style="${prevStyle}" >上一页</a>
		<a href="viewArticle?category.id=${category.id}&page.currentPage=1" style="${firstStyle}" >1</a><span style="${firstStyle}">...</span>
		<c:if test="${endPage != 1 }">
			<c:forEach var="i" begin="${startPage }" end="${endPage }" step="1">
			<c:choose>
				<c:when test="${i == page.currentPage}">
					<span class="current">${i}</span>
				</c:when>
				<c:otherwise>
					<a href="viewArticle?category.id=${category.id}&page.currentPage=${i}">${i}</a>
				</c:otherwise>
			</c:choose>
		</c:forEach>
		</c:if>
		<span style="${lastStyle}">...</span>
		<a href="viewArticle?category.id=${category.id}&page.currentPage=${page.totalPage}" style="${lastStyle}" >${page.totalPage}</a>
		<a href="viewArticle?category.id=${category.id}&page.currentPage=${page.currentPage+1}" style="${nextStyle}" >下一页</a>
	</div>
</c:if>


</bsl:layout-component>

<bsl:layout-component name="footer_info">
	<a>abc</a>
</bsl:layout-component>
</bsl:layout-render>